<template>
	<view>
		<cu-custom bgColor="bg-blue" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">防火巡查</block>
		</cu-custom>
		<view  class="scroll-outer">
			<view  class="scroll">
				<scroll-view scroll-y="true" >
					<view :class="{'changeColor':tabIndex==index}"  @click="changeTab(index)" class="scroll_inner" v-for="(item,index) in tabList" :key="index">
						<view>{{item.name}}</view>
					</view>
				</scroll-view>
			</view>
			<view class="scroll_rig" >
				<view v-for="i in 3" class="scroll_rig_inner" @click="gotodeatils()">
					<view class="person_img">
						<image src="../../../static/img/basics/u87.png" mode=""></image>
					</view>
					<view class="person_rig">
						<view class="person_tp">
							<view class="top">
								2楼xxx巡查点
							</view>
							<view>本月已寻查x次</view>
						</view>
						<view class="person_icon">
							<text class="lg text-gray cuIcon-right" ></text> 
						</view>
					</view>
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabIndex:0,
				tabList:[
					{
					 name:'1楼层名称'
					},
					{
						 name:'2楼层名称'
					},
					{
						 name:'3楼层名称'
					}
				]
			}
		},
		methods: {
				changeTab(index){
					this.tabIndex = index;
				},
				gotodeatils(){
					uni.navigateTo({
						url:'./detail'
					})
				}
		}
	}
</script>
<style scoped lang="scss">
	page{
			background-color: #f2f2f2;
		}
		.scroll_inner{
			height:100rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.scroll-outer{
			display: flex;
			height:100vh;
		}
		
		.scroll{
			background-color: #F2F2F2;
			flex: 1;
		}
		.changeColor{
			background-color:#FFFFFF;
		}
		.scroll_rig{
			background-color:#FFFFFF;
			display: flex;
			flex-direction: column;
			flex: 2;
			padding: 0 20rpx;
			width: 100%;
			height:100%;
			.person_img{
				image{
					width:120rpx;
					height: 120rpx;
				}
			}
			.person_rig{
				margin-left:20rpx;
				display: flex;
				flex:1;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1rpx solid #DDDDDD;
			}
			.person_bt{
				font-size:28rpx;
				.right{
					margin-right: 12rpx;
				}
			}
			.person_tp{
				height: 100%;
				padding-bottom: 6rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				align-items: flex-start;
				.top{
					font-size:34rpx;
				}
			}	
		}
		.person_icon{
			text{
				font-size:40rpx;
			}
		}
		.cu-tag{
			height: 36rpx;
			margin: 0 15rpx;
		}
		.scroll_rig_inner{
			padding: 20rpx 0;
			display: flex;
		}
		
</style>
